<template>
	<view class="i-rateItem" :style="{borderBottom: line ? '1rpx solid #f0f0f2' : ''}">
		<view class="item_top">
			<view class="item_top_left">
				<view class="image">
					<image v-if="data.userHeadUrl" :src="data.userHeadUrl"></image>
				</view>
				<view class="name_rate">
					<text class="top_name" v-if="data.nickName">{{data.nickName}}</text>
					<i-rate :oneStart="oneStart" :rate="data.star"></i-rate>
				</view>
			</view>
			<view class="item_top_right">
				{{data.createTime}}
			</view>
		</view>
		<view class="item_content">
			{{data.comment}}
		</view>
		<view class="item_iamges" v-if="data.picList?.length">
			<view class="image" v-for="(item, index) in data.picList" :key="index">
				<image mode="aspectFill" :src="item"></image>
			</view>
		</view>
		<view v-if="data.goodName">
			<view class="tagList" v-if="/\,/g.test(data.goodName)">
				<i-tag right="20rpx" bottom="20rpx" v-for="(item,index) in data.goodName.split(',')"
					:key="index">{{item}}</i-tag>
			</view>
			<i-tag v-else>{{data.goodName}}</i-tag>
		</view>
	</view>
</template>

<script lang="ts" setup>
	defineProps({
		data: {
			type: Object,
			default: () => {
				return {}
			}
		},
		line: {
			type: Boolean,
			default: false
		},
		oneStart: {
			type: Boolean,
			default: false
		}
	})
</script>

<style lang="scss" scoped>
	.i-rateItem {
		background: #fff;
		padding: 40rpx 0;


		.item_top {
			@include flexRS;

			.item_top_left {
				@include flexR;

				.image {
					width: 56rpx;
					height: 56rpx;
					border-radius: 56rpx;
					margin-right: 24rpx;
					background-color: #E6E6F0;

					image {
						width: 56rpx;
						height: 56rpx;
						border-radius: 56rpx;
					}

				}

				.name_rate {
					.top_name {
						@include titlefont(28rpx);
					}
				}
			}

			.item_top_right {
				@include contentfont(24rpx);
			}

			margin-bottom: 20rpx;
		}

		.item_content {
			@include contentfont(28rpx);
			color: $title-color;
			margin-bottom: 32rpx;
		}

		.item_iamges {
			@include flexR;
			flex-wrap: wrap;
			margin-bottom: 32rpx;

			.image {
				width: 176rpx;
				height: 176rpx;
				border-radius: 8rpx;
				margin: 0 8rpx;
				@include flexRS;
				margin-bottom: 12rpx;
				background-color: #E6E6F0;

				image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}
		}

		.tagList {
			@include flexR;
			flex-wrap: wrap;
		}
	}
</style>